<aside class="myaside">
    <!--关注我-->
    <div class="focus-me bg-color animation-div">
        <h4 class="index-title"><i class="el-heart"></i>关注我
            <small>Follow</small>
        </h4>
        <div class="xiangguan">
            {# 自我介绍 #}
            <div class="for-me">
                {# 文字 #}
                <div class="text">
                    <h2 class="cn">{{ name }}</h2>
                    <span id="typed"></span>
                    <script src="/static/js/typed.min.js"></script>
                </div>
                {# 头像 #}
                <a class="notransition" href="{% url 'blog:about' %}" data-pjax-state="">
                    {% if avatar_link %}
                        <img class="headportrait" alt="加载失败~" src="{{ avatar_link }}">
                    {% else %}
                        <img class="headportrait" alt="加载失败~"  src="/static/images/icon/user.gif">
                    {% endif %}
                </a>
            </div>
            {# 组件 #}
            <div>
                <a class="git" href="{{ git }}" target="_blank">
                    <svg t="1624505053877" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="3350" width="50" height="50.5"
                         style="transform: scale(1.14)">
                        <path d="M410.737778 75.093333C180.906667 136.533333 22.755556 370.915556 65.991111 587.093333 117.191111 838.542222 351.573333 1012.622222 583.68 969.386667c250.311111-46.648889 428.942222-285.582222 385.706667-515.413334-35.271111-193.422222-162.702222-331.093333-349.297778-380.017777-81.92-20.48-128.568889-20.48-209.351111 1.137777z m357.262222 237.795556v45.511111l-185.457778 5.688889c-230.968889 6.826667-220.728889-1.137778-216.177778 176.355555l3.413334 125.155556h134.257778c121.742222 0 136.533333-2.275556 151.324444-22.755556 9.102222-12.515556 14.791111-32.995556 13.653333-45.511111-3.413333-20.48-13.653333-23.893333-100.124444-28.444444l-96.711111-5.688889v-91.022222h295.822222l3.413333 91.022222c3.413333 106.951111-17.066667 157.013333-78.506666 190.008889-34.133333 18.204444-62.577778 20.48-232.106667 18.204444l-193.422222-3.413333-2.275556-187.733333c-3.413333-176.355556-2.275556-190.008889 22.755556-232.106667 44.373333-78.506667 76.231111-87.608889 292.408889-84.195556l187.733333 3.413334v45.511111z"
                              fill="#c71c22" p-id="3351"></path>
                    </svg>
                </a>
                <span style="margin: -7%; margin-left: 1px">Gitee</span>
            </div>
            <div>
                <a class="benbo" href="https://gitee.com/wu_cl/DBlog" target="_blank">
                    <i class="el-download-alt"></i>
                </a>
                <span>博客源码</span>
            </div>
            <div>
                <a class="side-fx">
                    <i class="el-share-alt"></i>
                </a>
                <span>分享本博</span>
            </div>
            <div>
                <a class="mail-btn" href="javascript:;">
                    <i class="el-envelope"></i>
                </a>
                <span>订阅我</span>
            </div>
        </div>
        {# 邮箱订阅表单弹窗 #}
        <div class="mail-dy">
            <form action="{% url 'blog:subscription_record' %}" method="post" class="comment-form">
                <span>订阅</span>
                <label>
                    <input name="email" type="email" placeholder="输入邮箱订阅文章发布"/>
                </label>
                <i class="el-envelope"><a title="点击订阅"><input value="" type="submit"/></a></i>
            </form>
            <i class="el-remove fx-close"></i>
        </div>
        {# 分享弹窗 #}
        <div class="bd-fx side-bdfx">
            <i class="el-remove fx-close"></i>
            <div class="social-share" data-initialized="true" style="text-align: center; margin: 30px;">
                <a href="#" class="social-share-icon icon-weibo"></a>
                <a href="#" class="social-share-icon icon-qq"></a>
                <a href="#" class="social-share-icon icon-wechat"></a>
                <a href="#" class="social-share-icon icon-qzone"></a>
            </div>
        </div>
    </div>

    <!--搜索-->
    <div class="search animation-div">
        <form action="{% url 'blog:search' %}" method="get">
            <div class="search-index">
                <label>
                    <input name="key" type="text" placeholder="请输入关键字..." onfocus="this.placeholder=''"
                           onblur="this.placeholder='请输入关键字...'"/>
                </label>
                <i class="el-search"><input value=" " type="submit"/></i>
            </div>
        </form>
    </div>

    <!--公告-->
    <div class="main_news bg-color animation-div">
        <h4 class="index-title"><i class="el el-bullhorn"></i>公告
            <small>MainAnnouncement</small>
        </h4>
        {% if main_announcement_list %}
            {% for news in main_announcement_list %}
                <p class="annou" style="word-break: break-all;">
                    {{ news.main_announcement }}
                </p>
            {% endfor %}
        {% else %}
            <p class="annou" style="color:rgb(188 188 188)">
                暂无公告......
            </p>
        {% endif %}
    </div>

    <!--最新咨询-->
    <div class="clos-new bg-color animation-div" style="margin-top: 30px">
        <h4 class="index-title"><i class="el-bulb"></i>最新资讯
            <small>News</small>
        </h4>
        <ul>
            <li><i class="el-cloud"></i>天气：
                <iframe id="tianqi" width="200" height="45" frameborder="0" scrolling="no" hspace="0"
                        src="https://i.tianqi.com/?c=code&a=getcode&id=87&icon=1" style="margin-bottom: -15px">
                </iframe>
            </li>
        </ul>
    </div>

    <!--文章排行tab-->
    <!--评论模块-->
    <div class="mytab bg-color animation-div">
        <div class="tab-btn">
            <a class="hd-btn tab-active" href="javascript:"><i class="el-comment-alt"></i>最新评论</a>
            <a class="ph-btn" href="javascript:"><i class="el-signal"></i>文章排行</a>
        </div>
        <ul class="hudong-ul">
            {% for comment in comment_list %}
                <li>
                    <div class="sd-name">
                        <span><i class="el-book"></i>{{ comment.title }}</span>
                        <a class="blue-text" href="{{ comment.url }}#{{ comment.comment }}"
                           title="{{ comment.created_time }}">
                            {{ comment.comment | safe }}
                        </a>
                        <span style="text-align: right; margin-left: 66px">—&nbsp;&nbsp;<i class="el-user"></i>
                        {{ comment.name }}
                            {% if comment.request_address %}
                                <p style="color: #7799 !important; font-size: xx-small">IP 属地: {{ comment.request_address }}</p>
                            {% else %}
                                <p style="color: #7799 !important; font-size: xx-small">IP: {{ comment.request_ip }}</p>
                            {% endif %}
                        </span>
                    </div>
                </li>
            {% endfor %}
        </ul>
        <!--文章排行模块-->
        <ul class="paihang-ul">
            {% for blog in blog_top %}
                <li>
                    <span></span>
                    <a href="{% url 'blog:detail' blog.id %}" title="{{ blog.title }}">{{ blog.title }}
                        <b><i class="el-eye-open"></i>({{ blog.view }})</b>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>

    <!--标签-->
    <div class="cloud bg-color animation-div">
        <h4 class="index-title"><i class="el-tags"></i>标签
            <small>Tags</small>
        </h4>
        <ul id="3dcloud">
            {% for tag in tag_list %}
                <li><a href="{% url 'blog:tag' name=tag.tag_name %}"
                       title="标签：{{ tag.tag_name }} ">{{ tag.tag_name }}</a></li>
            {% endfor %}
        </ul>
    </div>

    <!--友情链接-->
    <div class="side-link animation-div">
        <h4 class="index-title"><i class="el-paper-clip"></i>友情链接
            <small>Links -></small>
            <a style="float: none !important;"
               href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=2186656812@qq.com">
                <small style="text-decoration: underline"><i class="el el-envelope"></i>申请</small>
            </a>
        </h4>
        <ul>
            {% for friend in friends %}
                <li><a href="{{ friend.url }}" target="_blank" title="{{ friend.title }}">{{ friend.name }}</a></li>
            {% endfor %}
        </ul>
    </div>

    <!--支持server-->
    <div class="side-link animation-div">
        <h4 class="index-title"><i class="el el-thumbs-up"></i>咖啡续命
            <small>(WeChatPay / AliPay)</small>
        </h4>
        <table>
            <tr>
                {% for pay_img in pay_img_list %}
                    <td>
                        <a href="{{ MEDIA_URL }}{{ pay_img.pay_img }}">
                            <img style="width: 135px; height: 150px; margin-top: 8px; margin-left: 30px"
                                 src="{{ MEDIA_URL }}{{ pay_img.pay_img }}" alt="加载失败~">
                        </a>
                    </td>
                {% endfor %}
            </tr>
        </table>
    </div>
</aside>

<script>
    // 个人描述
    var typed = new Typed("#typed", {
        strings: ['{{ chinese_description }}', '{{ english_description }}'],
        startDelay: 300,
        typeSpeed: 100,
        loop: true,
        backSpeed: 50,
        showCursor: true
    });
    // 分享和订阅弹窗
    $(".side-fx").click(function (e) {
        $(".side-bdfx").show();
        $(".mail-dy").hide();
        $(document).one("click", function () {
            $(".side-bdfx").hide();
            $(".mail-dy").hide();
        });
        e.stopPropagation();
    });
</script>
